<template>
  <div
    v-if="open && show"
    class="special-card"
    :class="{ 'enter-animation': expandAnimation }"
    :style="style"
  >
    <div class="bg-first card-enter">
      <card-border />
    </div>
    <div class="bg-second card-enter">
      <card-border />
    </div>
    <div class="bg-third card-enter">
      <card-border type="hexa" />
    </div>
    <div class="bg-forth card-enter">
      <div class="special-card-body">
        <div class="special-card-content">
          <slot></slot>
          <card-border
            type="hexa"
            style="background: rgba(87, 195, 255, 1);"
          />
        </div>
        <div class="left-top active"></div>
        <div class="left-bottom active"></div>
        <div class="right-bottom active"></div>
        <div class="block-container">
          <div
            class="block-item block-first"
            style="--i:1"
          ></div>
          <div
            class="block-item block-second"
            style="--i:2"
          ></div>
          <div
            class="block-item block-third"
            style="--i:3"
          ></div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="special-card"
    v-if="overAnimation && open && !isRemoveNode"
    :style="style"
  >
    <Svga
      name="over-animation"
      class="max-w-60 my-0 mx-auto"
      :class="{ 'card-leave': show }"
      @onProcess="handleOnProcess"
    />
  </div>
</template>
<script
  lang="ts"
  setup
  name="SpecialCard"
>
import { equ } from '../../../../package-env';

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  overAnimation: {
    type: Boolean, // 过度动画
    required: false,
    default: true
  },
  expandAnimation: {
    type: Boolean, // 展开动画
    required: false,
    default: true
  },
  height: {
    type: Number,
    required: false,
    default: 153,
  },
  width: {
    type: Number,
    required: false,
    default: 0,
  },
  style: {
    type: [Object, String],
    default: ''
  }
})

const show = ref(false);
const isRemoveNode = ref(false);

const handleOnProcess = (percent, currentFrame, totalFrames) => {
  if (percent.toFixed(1) === '0.5') {
    show.value = true;
  }
  if (percent === 1) {
    isRemoveNode.value = true;
  }
}

const computedMaxSize = (first: number, second: number) => Math.max(first, second);

const transferSize = (value: number, num: number) => {
  return `${value + num}px`;
}

const geometricSize = computed(() => {
  const { height } = props;
  const clientWidth = document.body.clientWidth || document.documentElement.clientWidth;
  const width = equ === 'h5' ? (clientWidth * 0.7) : props.width || 372;
  const sizeMap = {
    firstWidth: '319px',
    firstHeight: '57.5px',
    secondWidth: '285px',
    secondHeight: '109px',
    thirdWidth: '262px',
    thirdHeight: '160.5px',
    forthWidth: '257px',
    forthHeight: '153px',
    containerHeight: '161px',
  };

  if (height > 150) {
    sizeMap.firstHeight = `${computedMaxSize(height - 101, 57.5)}px`;
    sizeMap.firstWidth = transferSize(width, 62);
    sizeMap.secondHeight = `${computedMaxSize(height - 48, 109)}px`;
    sizeMap.secondWidth = transferSize(width, 28);
    sizeMap.thirdHeight = transferSize(height, 8);
    sizeMap.thirdWidth = transferSize(width, 5);
    sizeMap.forthHeight = transferSize(height, 0);
    sizeMap.forthWidth = transferSize(width, 0);
    sizeMap.containerHeight = transferSize(height, 29);
  }

  return sizeMap;
});

const onTouchStart = (event) => {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
};

let lastTouchEnd = 0;
const onTouchEnd = (event) => {
  const now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
};

const onGesturestart = (event) => {
  event.preventDefault();
}

onMounted(() => {
  document.addEventListener('touchstart', onTouchStart);
  document.addEventListener('touchend', onTouchEnd, false);
  document.addEventListener('gesturestart', onGesturestart);

  if (!props.overAnimation) {
    show.value = true;
  }
});

onBeforeUnmount(() => {
  document.removeEventListener('touchstart', onTouchStart);
  document.removeEventListener('touchend', onTouchEnd, false);
  document.removeEventListener('gesturestart', onGesturestart);
});
</script>
<style
  scoped
  lang="scss"
>
.special-card {
  @apply absolute w-screen flc z-100;
  height: v-bind('geometricSize.containerHeight');

  .bg-first {
    @include set-clip(polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px));
    @apply absolute;
    margin: 0 auto;
    width: v-bind('geometricSize.firstWidth');
    height: v-bind('geometricSize.firstHeight');
    opacity: 0.45;
    background: rgba(10, 55, 112, 0.65);
    border-radius: 0.5px;
    border: 1px solid rgba(25, 53, 84, 1);
  }

  .bg-second {
    @include set-clip(polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px));
    @apply absolute;
    margin: 0 auto;
    width: v-bind('geometricSize.secondWidth');
    height: v-bind('geometricSize.secondHeight');
    background: rgba(17, 50, 100, 0.65);
    border-radius: 0.5px;
    border: 1px solid rgba(25, 53, 84, 1);
  }

  .bg-third {
    @include set-clip(polygon(70.4% 0, calc(70.4% + 10px) 10px, calc(100% - 10px) 10px, 100% 20px, 100% calc(100% - 13px),
        calc(100% - 13px) 100%,
        13px 100%,
        0 calc(100% - 13px),
        0 13px,
        13px 0));
    margin: 0 auto;
    width: v-bind('geometricSize.thirdWidth');
    height: v-bind('geometricSize.thirdHeight');
    background: rgba(28, 60, 93, 0.45);
    border: 1px solid rgba(9, 75, 130, 1);
  }

  .bg-forth {
    @apply absolute;
    margin: 0 auto;

    .special-card-body {
      position: relative;
    }

    .special-card-content {
      @include set-clip(polygon(70.4% 0, calc(70.4% + 10px) 10px, calc(100% - 10px) 10px, 100% 20px, 100% calc(100% - 13px),
          calc(100% - 13px) 100%,
          13px 100%,
          0 calc(100% - 13px),
          0 13px,
          13px 0));
      @apply relative backdrop-filter backdrop-blur-[32px];
      width: v-bind('geometricSize.forthWidth');
      height: v-bind('geometricSize.forthHeight');
      background: linear-gradient(180deg, rgba(39, 140, 234, 0.45) 1.09%, rgba(0, 0, 0, 0.25) 107.14%);
      box-shadow: 0px 0px 50px rgba(54, 147, 255, 0.65) inset;
      border: 1px solid rgba(87, 195, 255, 1);
    }


    .left-top {
      @include set-clip(polygon(0 0, 100% 0, 0 100%));
      @apply absolute top-0 left-0;
      width: 10px;
      height: 10px;
      border-radius: 1.5px;
      background: rgba(79, 170, 255, 1);
    }

    .left-bottom {
      @include set-clip(polygon(0 0, 0% 100%, 100% 100%));
      @apply absolute left-0 bottom-0;
      width: 10px;
      height: 10px;
      border-radius: 1.5px;
      background: rgba(79, 170, 255, 1);
    }

    .right-bottom {
      @include set-clip(polygon(100% 0, 0% 100%, 100% 100%));
      @apply absolute right-0 bottom-0;
      width: 10px;
      height: 10px;
      border-radius: 2.5px;
      background: rgba(79, 170, 255, 1);
    }

    .active {
      box-shadow: 0 0 5px rgba(79, 170, 255, 1),
        0 0 25px rgba(79, 170, 255, 1),
        0 0 50px rgba(79, 170, 255, 1),
        0 0 200px rgba(79, 170, 255, 1);
      /* animation: breathe 0.8s ease-in-out infinite alternate; */
    }

    @keyframes breathe {
      0% {
        opacity: .4;
      }

      100% {
        opacity: 1;
      }
    }
  }

  .block-container {
    @apply absolute left-[74%] flex items-end gap-1.25;
    top: 0px;
    width: 30px;
    height: 4px;
  }

  .block-first {
    position: relative;
    width: 9px;
    height: 7.5px;
  }

  .block-second {
    position: relative;
    width: 9px;
    height: 5px;
  }

  .block-third {
    position: relative;
    width: 9px;
    height: 2.5px;
  }

  .block-item {
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      transform: skewX(45deg);
      background: linear-gradient(94.29deg, rgba(34, 162, 255, 1) -5.07%, rgba(64, 175, 255, 1) 31.45%, rgba(15, 122, 255, 1) 147.35%);
      background: linear-gradient(94.29deg, rgba(34, 162, 255, 1) -5.07%, rgba(64, 175, 255, 1) 31.45%, rgba(15, 122, 255, 1) 147.35%);
      /* animation: animate 1s linear infinite;
      animation-delay: calc(0.25s * var(--i)); */
    }
  }

  @keyframes animate {
    0% {
      opacity: 0;
    }

    25%,
    75% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
}

.enter-animation {
  .card-enter {
    animation: enter 0.7s linear both;
    -webkit-animation: enter 0.7s ease-in both;

    &:nth-child(1) {
      animation-delay: 0.3s;
    }

    &:nth-child(2) {
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      animation-delay: 0.1s;
    }
  }
}


.card-leave {
  animation: enter 0.7s linear both reverse;
  -webkit-animation: enter 0.7s ease-in both reverse;
}

@keyframes enter {
  0% {
    transform: scale(0);
  }

  25% {
    transform: scale(0.25);
  }

  50% {
    transform: scale(0.5);
  }

  75% {
    transform: scale(0.75);
  }

  100% {
    transform: scale(1);
  }
}
</style>
